<template>
<el-menu active-text-color='#303133'  v-if="visible" class="mymenu el-menu-vertical-demo"  :menu-trigger='click' :collapse="true">
    <template v-for="(item, index) in menuItems">
        <!-- 如果当前菜单项有子菜单，则使用 el-submenu 组件 -->
        <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.label" :key="item.label" popper-class="mysubmenu">
            <template #title>
                  <svg-icon class-name="iconfont"  :icon-class="item.icon" />{{ item.label }}
            </template>
            <!-- 递归调用自身，传入子菜单数据，构建多级菜单 -->
            <el-menu-item v-for="elem in item.children" :key="elem.label" @click="item.cb">
                <svg-icon class-name="iconfont"  :icon-class="elem.icon" />{{ elem.label }}
            </el-menu-item>
        </el-sub-menu>
        <!-- 如果当前菜单项没有子菜单，则使用 el-menu-item 组件 -->
        <el-menu-item v-else :index="item.label" :key="item.label" @click="item.cb">
            <svg-icon class-name="iconfont"  :icon-class="item.icon" />{{ item.label }}
        </el-menu-item>
          <el-divider v-if="item.divider" />
    </template>
</el-menu>
</template>

<script setup>
import { defineProps } from "vue";

// 接收外部传入的菜单数据
const props = defineProps(["menuItems",'visible']);
 const  emits= defineEmits(['update:visible']);
onMounted(() => {

})
</script>

<style lang="scss">
.mysubmenu {
    .el-menu-item {
        height: 30px !important;
    }
    .el-menu {
        overflow: hidden !important;
        padding: 0 !important;
    }
    .el-menu--popup{
        min-width: 150px;
    }
    .el-menu--vertical > .el-menu .svg-icon{
        margin-right: 5px;
    }
}

.mymenu.el-menu--vertical>.el-menu--popup {
    overflow: hidden;
}

.mymenu {
    transition: none;
  .el-sub-menu__icon-arrow{
 display: block !important;
}
 .el-sub-menu__icon-arrow{
    top: 30% !important;
    right: 10px !important;
    opacity:1 !important
}
.el-menu-item,.el-sub-menu__title{
    padding: 0px 10px !important;
}
}

</style>
<style lang="scss" scoped>
.el-divider{
    margin: 0;
}
.el-menu-item,.el-sub-menu__title{
    padding: 0px 10px !important;
}
.iconfont {
    width: 24px;
    height: 18px;
    font-size: 20px;
    cursor: pointer;
    margin-right: 5px;
}

.mymenu {
    min-width: 150px;
    padding: 0;
    z-index: 9;
    position: fixed;
    border: 1px solid rgba(186, 186, 186, 0.6509803922);
    border-radius: 4px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    .el-menu-item,
    .el-sub-menu {
        height: 30px !important;
    }

    .el-sub-menu__title {
        height: 30px;
    }

    :deep(.el-sub-menu__title) {
        height: 30px;
    }
}
</style>
